<title>{{product.name}} (User Reviews)</title>

{% load staticfiles %}
{% load customFilters %}

<html>
<head>
	<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}" />
	<script src='{% static "js/jquery-1.11.3.js" %}'></script>
	<script src='{% static "js/base.js" %}'> </script>

</head>
<style>
#review {
	border-top: 1px solid #D3D3D3;
	margin: 0 20px;
	padding: 20px 0;
}

#stars {
	height: 20px;
	display: block;
}

#date {
	font-size: 12px;
	font-style: italic;
	font-family: Georgia, "Times New Roman", Times, serif;
}

h3 {
	color: #808080;
	text-align: left;
	margin-bottom:3px;
}

</style>
<body>

<div id='container'>
	<div id='top'>
		<div id='top-head'>
			<div id='title'>Hunter.com</div>
		</div>
		<div id='top-nav'>
			<ul id='menu'>
				<li id='menu-left'><a href='{% url "accounts:home" %}'><img src='{% static "images/home.png" %}'></a></li>
				<li id='menu-left'>User Reviews</li>
				<li id='menu-search'>
					<form id='menu-search-form' method='post'>
						{% csrf_token %}
						<div id='menu-search-form-submit-div'><input type="image" id='menu-search-form-submit' src='{% static "images/search.png" %}'></input></div>
						<div id='menu-search-form-input-div'><input type='text' id='menu-search-form-input' name='search' placeholder='Search products...'></input></div>
					</form>
				</li>
				{% if login_check %}
					<li id='menu-right'>Welcome {{user_fname}}!</li>
					<li id='menu-right'><a href="{% url 'accounts:logout' %}">Logout</a></li>
				{% else %}
					<li id='menu-right'><a href="{% url 'accounts:login' %}">Login</a></li>
					<li id='menu-right'><a href="{% url 'accounts:make_new_user' %}">Register</a></li>
				{% endif %}
			</ul>
		</div>
	</div>
	<div id='main'>
		<div id='content'>
			<h1>{{product.name}}</h1>
			{{product.description}}
			<br>
			{% for review in review_set %}
			
			<div id='review'>
				<h3>
					<a href='{{review.customer_link}}' style=''>{{review.customer_name}}:</a>
					<div id='stars' style='background: url({% static "images/stars.png" %}) -{{review.star|imgStr}} 0; width: {{review.star|imgStr}}; float: right;'></div>
				</h3>
				<q><b>{{review.title}}:</b>{{review.content}}</q>
				<div id='date'>{{review.time}}</div>
			</div>
			{% endfor %}
		</div>
		<script>windowResize()</script>
	</div>
	<div id='foot'>
		created by 郝蕊 and Leonard Wainstein | designed by Gabriel Mickel<br>
		copyrighted: never! :)
	</div>
</div>
</body>
</html>